<template>
  <div class="app-container">
    <!-- 水表实时数据 -->
    <el-form size="small" :inline="true">
      <el-form-item label="设备">
        <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="校区">
        <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="楼栋">
        <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="房间">
        <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
      </el-form-item>
    </el-form>

    <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
    <el-button size="small" icon="el-icon-refresh">重置</el-button>
    <el-button size="small" type="primary" icon="el-icon-folder-add" @click="showAddArea">新增</el-button>

    <el-divider></el-divider>
    <!-- 表格 -->
    <el-table size="small" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column type="index" label="#" align="center"></el-table-column>

      <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
      <el-table-column prop="campusName" label="校区" align="center"></el-table-column>
      <el-table-column prop="buildingName" label="楼栋" align="center"></el-table-column>
      <el-table-column prop="" label="房间" align="center"></el-table-column>
      <el-table-column prop="categoryName" label="区域-类目" align="center"></el-table-column>

      <el-table-column prop="manufacturersName" label="生产厂商" align="center"></el-table-column>
      <el-table-column prop="deviceAddress" label="设备安装地址" align="center"></el-table-column>

      <!-- <el-table-column label="区域-类目" align="center">
        <template slot-scope="">
          <el-tag>商业区-宿舍给水</el-tag>
        </template>
</el-table-column> -->
      <el-table-column prop="createTime" label="接入时间" align="center"></el-table-column>
      <el-table-column prop="handle" label="操作" align="center">
        <template slot-scope="">
          <el-button size="mini" type="text" plain icon="el-icon-view">查看详情</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination class="pagination" background layout="prev, pager, next" :total="total" :page-size="10"
      @current-change="handleCurrentChange"></el-pagination>



  </div>
</template>

<script>
import { getData } from '@/api/energyManage/waterManage/waterData/index.js'
export default {
  data() {
    return {

      tableData: [],

      form: {
        campusId: "",
        buildingId: "",
        dormNo: "",
        name: "",
        categoryId: "",
        current: 0,
        pageSize: 10
      },
      total: 0
    }
  },
  methods: {


    handleCurrentChange(e) {
      //当前页
      this.form.current = e
      this.getData()
    },
    // 查询实时数据
    getData() {
      getData(
        this.form
      ).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.tableData = []
          this.$message({
            message: res.data.message,
            duration: 1000
          })
        }
      })
    }
  },
  created() {
    this.getData()
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}
</style>
